<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="cyf">

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>曲库管理 - 咖啡音乐CoffeeMusic后台管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description"
	content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">

<!--
        	作者：cyf
        	时间：2019-03-28
        	描述：导入datatables样式表
        -->
<link
	href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"
	rel="stylesheet">


</head>

<body>
	<div class="lyear-layout-web">
		<div class="lyear-layout-container">
			<!--左侧导航-->
			<aside class="lyear-layout-sidebar">

				<!-- logo -->
				<div id="logo" class="sidebar-header">
					<a href="index.jsp"><img src="images/logo-sidebar.png"
						title="CoffeeMusic" alt="CoffeeMusic" /></a>
				</div>
				<div class="lyear-layout-sidebar-scroll">

					<nav class="sidebar-main">
						<ul class="nav nav-drawer">
							<li class="nav-item"><a href="index.jsp"><i
									class="mdi mdi-home"></i> 后台首页</a></li>
							<li class="nav-item nav-item-has-subnav"><a
								href="javascript:void(0)"><i class="mdi mdi-account-circle"></i>
									用户管理</a>
								<ul class="nav nav-subnav">
									<li><a href="userManagement.jsp"><i
											class="mdi mdi-account"></i> 用户</a></li>
								</ul></li>
							<li class="nav-item nav-item-has-subnav"><a
								href="javascript:void(0)"><i class="mdi mdi-music-circle"></i>
									曲库管理</a>
								<ul class="nav nav-subnav">
									<li><a href="musicManagement.jsp"><i
											class="mdi mdi-music-note"></i> 曲库</a></li>
								</ul></li>
								
								
								<li class="nav-item nav-item-has-subnav   active open">
									<a href="javascript:void(0)"><i class="mdi mdi-comment-account"></i> 评论管理</a>
									<ul class="nav nav-subnav">
										<li>
											<a href="commentsManagement.jsp"><i class="mdi mdi-comment-text"></i> 评论</a>
										</li>
									</ul>
								</li>
								
						</ul>
					</nav>

					<div class="sidebar-footer">
						<p class="copyright">
							Copyright &copy; 2019. <a target="_blank"
								href="http://lyear.itshubao.com">CoffeeMusic</a> All rights
							reserved.
						</p>
					</div>
				</div>

			</aside>
			<!--End 左侧导航-->

			<!--头部信息-->
			<header class="lyear-layout-header">

				<nav class="navbar navbar-default">
					<div class="topbar">

						<div class="topbar-left">
							<div class="lyear-aside-toggler">
								<span class="lyear-toggler-bar"></span> <span
									class="lyear-toggler-bar"></span> <span
									class="lyear-toggler-bar"></span>
							</div>
							<span class="navbar-page-title"> CoffeeMusic - 评论管理 </span>
						</div>

						<ul class="topbar-right">
							<li class="dropdown dropdown-profile"><a
								href="javascript:void(0)" data-toggle="dropdown"> <img
									class="img-avatar img-avatar-48 m-r-10"
									src="images/users/avatar.jpg" alt="笔下光年" /> <span>${sessionScope.user.uname}
										<span class="caret"></span>
								</span>
							</a>
								<ul class="dropdown-menu dropdown-menu-right">
									<li><a href="lyear_pages_profile.html"><i
											class="mdi mdi-account"></i> 个人信息</a></li>
									<li><a href="lyear_pages_edit_pwd.html"><i
											class="mdi mdi-lock-outline"></i> 修改密码</a></li>
									<li><a href="javascript:void(0)"><i
											class="mdi mdi-delete"></i> 清空缓存</a></li>
									<li class="divider"></li>
									<li><a href="../login?op=quit"><i
											class="mdi mdi-logout-variant"></i> 退出登录</a></li>
								</ul></li>
						</ul>

					</div>
				</nav>

			</header>
			<!--End 头部信息-->

			<!--页面主要内容-->
			<main class="lyear-layout-content">

			<div class="container-fluid">

				<div class="row">
					<div class="col-lg-12">
						<div class="card">
							<div class="card-toolbar clearfix">

								<div class="toolbar-btn-action">
									<a class="btn btn-primary m-r-5" href="#!" data-toggle="modal"
										data-target="#newUser" data-whatever="@doAddNewUser"><!--<i
										class="mdi mdi-plus"></i>-->悠悠</a> 
									 <a class="btn btn-success m-r-5"
										href="#!"><!--  <i class="mdi mdi-check"></i>-->岁月</a> <a
										class="btn btn-warning m-r-5" href="#!"><!--<i
										class="mdi mdi-block-helper"></i>--> 笔下</a> <a class="btn btn-danger"
										href="#!" id="btn_del"><!--<i class="mdi mdi-window-close"></i>-->
										光年</a>  
								</div>
							</div>
							<div class="card-body">

								<div class="table-responsive">
									<table class="table table-bordered" id="example">
										<thead>
											<tr>
											<th>评论id</th>
											<th>音乐id</th>
											<th>用户id</th>
											<th>评论内容</th>
											<th>评论时间</th>										
											<th>操作</th>
											</tr>
										</thead>

										<tfoot>
											<tr>
											<th>评论id</th>
											<th>音乐id</th>
											<th>用户id</th>
											<th>评论内容</th>
											<th>评论时间</th>										
											<th>操作</th>
											</tr>
										</tfoot>
									</table>
								</div>


							</div>
						</div>
					</div>

				</div>
			</div>
			</main>
			<!-- 新增评论部分，暂时考虑先不用 -->
			<!-- <div class="modal fade" id="newUser" tabindex="-1" role="dialog"
		aria-labelledby="newUser">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">新增评论</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="music-name" class="control-label">歌曲名：</label> <input
								type="text" class="form-control" id="mname"
								placeholder="请输入歌曲名...">
						</div>
						</br>
						<div class="form-group">
							<label for="music-url" class="control-label">歌曲URL：</label> <input
								type="text" class="form-control" id="murl"
								placeholder="请输入歌曲URL...">
						</div>
						</br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="btn_add">确认添加</button>
				</div>
			</div>
		</div>
	</div>
		 -->	
			
			<script type="text/javascript"
		src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="js/main.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
		<script type="text/javascript">
		$(function() {
			$('.search-bar .dropdown-menu a')
					.click(
							function() {
								var field = $(this).data('field') || '';
								$('#search-field').val(field);
								$('#search-btn')
										.html(
												$(this).text()
														+ ' <span class="caret"></span>');
							});
		});

	
		<!--点击添加时显示添加界面-->
		$('#exampleModal').on('show.bs.modal', function(event) {
			var button = $(event.relatedTarget)
			var recipient = button.data('whatever')
			var modal = $(this)
			//				modal.find('.modal-title').text('发送新消息给 ' + recipient)
			//				modal.find('.modal-body input').val(recipient)
		});
		<!--点击添加时显示添加界面结束-->
		
		<!-- Datatables分页展示评论 -->
		$(document)
				.ready(
						function() {
							$('#example')
									.DataTable(
											{
												ajax : "../CommentsServlet?op=query",
												columns : [
														 {
															data : "cid"
														}, {
															data : "mid"
														}, {
															data : "uid"
														}, {
															data : "contents"
														}, {
															data : "cdate"
														}, {
															"defaultContent" : "<button class='btn btn-danger'><i class='mdi mdi-window-close'></i>删除</button>"
														} ]
											});
						});
		
		<!-- Datatables分页展示评论结束 -->
		
		<!--添加评论确认添加按钮事件，点击后提交表单的数据-->
	 $("#btn_add").on('click',function(){
			var mname = $("#mname").val();
			var murl = $("#murl").val();
			console.log(mname);
			console.log(murl);
			if(mname!=""&&murl!=""){
				$.ajax({
					"url":"../ms.do?ac=add",
					"data":{
						"mname":mname,
						"murl":murl
					},
					"success":function(data){
						if(data.msg=="添加成功！"){
							alert(data.msg);
							location.reload();
						}else{
							alert(data.msg);
						}
					}
				})
			}
		}); 
		
		<!--删除评论-->
		$(document).on('click','button[class="btn btn-danger"]',function(){
			var data = $('#example').DataTable();
			var cid = data.row($(this).parents('tr')).data().cid;
			$.ajax({
				"url" : "../CommentsServlet?op=delcomments",
				"data" : {
					"cid" : cid
				},
				"success" : function(data) {
					if(data.msg=="删除成功"){
						alert(data.msg);
						$('#example').DataTable().ajax.reload(null,true);
					}else{
						alert("删除失败！")
					}
				}
			})
		})
		
	</script>
			<!--End 页面主要内容-->
		</div>

	
</body>

</html>